{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="refresh" content="57600"/>
    <link rel="shortcut icon" href="{% static 'infos/img/sun-yat.ico' %}" type="image/x-icon"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>{{ site_configs.head_title }}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'infos/case1/css/app.css' %}"/>
</head>

<body>
<header id="header">
    {#            { % csrf_toke % }#}
    <h3 class="header-title"><a href="javascript:void(0);" style='text-decoration:none;color:#fff;'
                                onclick="full_screen();">{{ site_configs.title }}</a></h3>
    <div class="header-info header-info-l">数据来源:{{ site_configs.from_data }}
        &nbsp;Version:{{ site_configs.version }}</div>
    <div class="header-info header-info-r">当前时间:<span id="nowDate"></span></div>
</header>

<div id="container">
    <div id="flexCon">
        <div class="flex-row">
            {% block top10 %}{% endblock %}
            {% block real_count %}{% endblock %}
            {% block geo_dis %}{% endblock %}
        </div>
        <div class="flex-row">
            {% block month_data %}{% endblock %}
            {% block csrc_data %}{% endblock %}
        </div>
    </div>
</div>

<footer id="footer">
    <div style="margin-top: -12px; margin-left: 50px; width: 600px;">
        {{ site_configs.year }}&copy;版权归<b>{{ site_configs.company }}</b>所有
    </div>
</footer>
<script type="text/javascript" src="{% static 'infos/case1/js/jquery-3.3.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'infos/case1/js/countUp.min.js' %}"></script>
<script type="text/javascript" src="{% static 'infos/case1/js/echarts.min.js' %}"></script>
<script type="text/javascript" src="{% static 'infos/case1/js/echarts-map-china.js' %}"></script>
<script type="text/javascript" src="{% static 'infos/case1/js/echarts-theme-shine.js' %}"></script>
<script type="text/javascript" src="{% static 'infos/js/common.js' %}"></script>
<script type="text/javascript">
    $(function () {
        //获取当天日期,每秒执行一次
        window.setInterval(function () {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            const hour = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            $("#nowDate").html(year + "年" + month + "月" + day + "日" + hour + "时" + minutes + "分" + seconds + "秒");
        }, 1000);

        //获取统计数据,每分钟统计一次
        window.setInterval(function () {
            $.ajax({
                type: 'get',
                url: "{% url 'infos:count_data' %}",
                dataType: "json"
            }).done(function (data) {
                //console.log('Data: ', data);
                rollNum("listedCompany", 0, data.listed_companies_total);
                rollNum("listedSecurity", 0, data.listed_securities_total);
                rollNum("totalMarket", 0, data.total_market_value);
                rollNum("circulationMarket", 0, data.circulation_market_value);
                rollNum("shRatio", 0, data.sh_pe_ratio);
                {#rollNum("shRatio", 0, data.sh_pe_ratio,2)#}
                rollNum("szRatio", 0, data.sz_pe_ratio);
            }).fail(function (jqXHR, textStatus) {
                console.log("异步请求失败: ", textStatus);
            })
        }, {{ site_configs.real_time }});

        //获取top10排行数据
        const rankChart = echarts.init(document.getElementById("rankChart"), "shine");
        const rankChartOpt = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                },
                formatter: function (params) {
                    const param = params[0];
                    const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
                    const suffix = '<span style="margin-left:5px;font-size:12px;">位患者好评</span>';
                    return param.name + "<br />" +
                        marker + "排名：" + (param.dataIndex + 1) + "<br />" +
                        marker + "共：" + param.value + suffix;
                }
            },
            grid: {
                top: 10,
                bottom: 10,
                left: 60
            },
            xAxis: {
                show: false,
                type: "value"
            },
            yAxis: {
                type: "category",
                inverse: true,
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {
                    fontSize: 12,
                    color: "#b0c2f9"
                }
            },
            series: [{
                name: "好评率排行",
                type: "bar",
                barCategoryGap: "60%",
                label: {
                    show: true,
                    position: "right",
                    fontSize: 12,
                    color: "#188df0",
                    emphasis: {
                        color: "#e6b600"
                    }
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 1, 1,
                            [
                                {offset: 0, color: '#b0c2f9'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#185bff'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 1, 1,
                            [
                                {offset: 0, color: '#b0c2f9'},
                                {offset: 0.7, color: '#e6b600'},
                                {offset: 1, color: '#ceac09'}
                            ]
                        )
                    }
                }
            }]
        };

        rankChart.setOption(rankChartOpt);
        //排名获取异步更新 每隔十分钟更新数据
        window.setInterval(function () {
            $.ajax({
                type: 'get',
                url: "{% url 'infos:rank_data' %}",
                dataType: "json"
            }).done(function () {
                $("#rankChart").addClass("chart-done");
            }).done(function (data) {
                //console.log('Data: ', data);
                const xData = [];
                const yData = [];
                for (let i in data) {
                    xData.push(data[i].market_capitalization);
                    yData.push(data[i].stock_name);
                }
                rankChart.setOption({
                    yAxis: {
                        data: yData
                    },
                    series: [{
                        name: "市价总值排行",
                        data: xData
                    }]
                });
            }).fail(function (jqXHR) {
                console.log("Ajax异步请求失败: ", jqXHR.status, jqXHR.statusText);
            })
        }, {{ site_configs.top10 }});

        //获取地域分布数据
        const mapChart = echarts.init(document.getElementById("mapChart"), "shine");
        const mapChartOpt = {
            tooltip: {
                formatter: function (params) {
                    const data = params.data;
                    return data.name + "<br />患者人数：" + data.value;
                }
            },
            visualMap: {
                type: "piecewise",
                splitNumber: 4,
                color: ['#FF4500', '#363eea', '#66ef3f', '#5ce2e2',],
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 5,
                textGap: 5,
                textStyle: {
                    fontSize: 10,
                    color: "#b0c2f9"
                },
                min: 0,
                max: 600,
                calculable: true,
                seriesIndex: [0]
            },
            geo: {
                map: "china",
                roam: false, //开启鼠标缩放和漫游
                zoom: 1, //地图缩放级别
                selectedMode: "single",
                top: 10,
                bottom: 10,
                layoutCenter: ["50%", "50%"],
                //layoutSize: "100%", //保持地图宽高比
                label: {
                    show: true,
                    fontSize: 10,
                    color: "#ceac09"
                }
            },
            series: [{
                name: "地域分布",
                type: "map",
                geoIndex: 0
            }]
        };
        mapChart.setOption(mapChartOpt);

        {#3,每隔2分钟实时统计数据#}
        window.setInterval(function () {
            $.ajax({
                type: 'get',
                url: "{% url 'infos:regions_data' %}",
                dataType: "json"
            }).done(function () {
                $("#mapChart").addClass("chart-done");
            }).done(function (data) {
                //console.log('Data: ', data);
                const chartData = [];
                for (let i in data) {
                    chartData.push({
                        name: data[i].region,
                        value: data[i].count
                    });
                }
                mapChart.setOption({
                    series: [{
                        name: "地域分布",
                        data: chartData
                    }]
                });
            }).fail(function (jqXHR) {
                console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
            })
        }, {{ site_configs.gen_dis_time }});

        //获取月度门诊量情况数据
        const trendChart = echarts.init(document.getElementById("trendChart"), "shine");
        const trendChartOpt = {
            tooltip: {
                {#formatter: '{b}：{c}人',#}
                trigger: "axis",
                axisPointer: {
                    type: "none"
                }
            },
            legend: {
                left: "center",
                bottom: 3,
                itemWidth: 15,
                itemHeight: 10,
                textStyle: {
                    fontSize: 12,
                    color: "#b0c2f9"
                },
                data: ["住院总收入", "门诊总收入", "医院总收入", "增长比例", "测试数据"]
            },
            grid: {
                top: 40,
                bottom: 50,
                left: 60,
                right: 60
            },
            xAxis: {
                type: "category",
                axisLine: {
                    lineStyle: {color: "#b0c2f9"}
                },
                axisTick: {show: false},
                axisLabel: {
                    fontSize: 12,
                    color: "#b0c2f9",

                }
            },
            yAxis: [{
                name: "金额(百万元)",
                type: "value",
                splitNumber: 10,
                {#maxInterval: 10,#}
                {#minInterval: 0,#}
                axisLine: {
                    lineStyle: {color: "#b0c2f9"}
                },
                splitLine: {show: false},
                axisTick: {color: "#b0c2f9"},
                axisLabel: {
                    fontSize: 12,
                    color: "#b0c2f9",
                    formatter: (value, index) => {
                        return parseInt(value / 100);
                    },
                    {#color: function (value) {//x轴颜色的设定#}
                    {#    return value >= 100 ? 'red' : 'blue';//横坐标预警值#}

                }
            }
                , {
                    name: "金额(百万元)",
                    type: "value",
                    splitNumber: 10,
                    {#maxInterval: 10,#}
                    {#minInterval: 0,#}
                    {#interval: 2,#}
                    axisLine: {
                        lineStyle: {color: "#b0c2f9"}
                    },
                    splitLine: {show: false},
                    axisTick: {color: "#b0c2f9"},
                    axisLabel: {
                        fontSize: 12,
                        color: "#b0c2f9",
                        formatter: (value, index) => {
                            return parseInt(value / 100);
                        }
                    }
                }],
            visualMap: {
                show: false,
                seriesIndex: 4,
                dimension: 3,
                pieces: [{
                    lte: 9,
                    color: "rgba(176, 58, 91, 1)"
                }, {
                    gt: 9,
                    lte: 11,
                    color: "rgba(176, 58, 91, 0.5)"
                }]
            },
            series: [{
                name: "住院总收入",
                type: "pictorialBar",
                symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
                barCategoryGap: "40%",
                itemStyle: {
                    color: function (params) {
                        if (params.dataIndex >= 10) {
                            return "rgba(119, 96, 246, 0.5)";
                        }
                        return "rgba(119, 96, 246, 1)";
                    }
                },
                markPoint: {
                    itemStyle: {
                        color: "rgba(119, 96, 246, 1)"
                    },
                    data: [{
                        name: "最大值",
                        type: "max"
                    }]
                },
                markLine: {
                    lineStyle: {
                        color: "rgba(119, 96, 246, 1)"
                    },
                    label: {
                        position: "middle",
                        formatter: "月度住院总收入：{c}万元"
                    },
                    data: [{
                        name: "平均值",
                        type: "average"
                    }]
                }
            }
                , {
                    name: "门诊总收入",
                    type: "pictorialBar",
                    symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
                    barCategoryGap: "40%",
                    itemStyle: {
                        color: function (params) {
                            if (params.dataIndex >= 10) {
                                return "rgba(230, 182, 0, 0.5)";
                            }
                            return "rgba(230, 182, 0, 1)";
                        }
                    },
                    markPoint: {
                        itemStyle: {
                            color: "rgba(230, 182, 0, 1)"
                        },
                        data: [{
                            name: "最大值",
                            type: "max"
                        }]
                    },
                    markLine: {
                        lineStyle: {
                            color: "rgba(230, 182, 0, 1)"
                        },
                        label: {
                            position: "middle",
                            formatter: "月度平均门诊总收入：{c}万元"
                        },
                        data: [{
                            name: "平均值",
                            type: "average"
                        }]
                    }
                }
                , {
                    name: "医院总收入",
                    type: "line",
                    markPoint: {
                        itemStyle: {
                            color: "rgb(239,20,6)"
                        },
                        data: [{
                            name: "最大值",
                            type: "max",

                        }]
                    },
                    {#    默认为0,可以根据需要再补充数据#}
                    {#yAxisIndex: 1#}
                },
                {
                    name: '增长比例',
                    type: 'pictorialBar',
                    barCategoryGap: '20%',
                    // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                    color: ['#ff31ce'],
                    itemStyle: {
                        normal: {
                            opacity: 0.7,
                        },
                        offset: 2,
                        emphasis: {
                            opacity: 1
                        }
                    },
                    markPoint: {
                        itemStyle: {
                            color: "rgb(255,49,206)"
                        },
                        data: [{
                            name: "最大值",
                            type: "max",

                        }]
                    },
                }
                , {
                    name: '测试数据',
                    type: 'bar',
                    barWidth: 7,
                    {#barCategoryGap: "40%",#}
                    itemStyle: {
                        normal: {
                            barBorderRadius: 8,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#14c8d4'},
                                    {offset: 1, color: '#43eec6'}
                                ]
                            )
                        }
                    },
                    markPoint: {
                        itemStyle: {
                            color: "rgb(2,239,107)"
                        },
                        data: [{
                            name: "最大值",
                            type: "max",

                        }]
                    }
                }
            ]
        };
        trendChart.setOption(trendChartOpt);
        window.setInterval(function () {
            $.ajax({
                type: 'get',
                url: "{% url 'infos:month_data' %}",
                dataType: "json"
            }).done(function () {
                $("#trendChart").addClass("chart-done");
            }).done(function (data) {
                //console.log('Data: ', data);
                const xData = [];
                const yData1 = [];
                const yData2 = [];
                const yData3 = [];
                const yData4 = [];
                const yData5 = [];
                for (let i in data) {
                    xData.push(data[i].month);
                    yData1.push(data[i].sh_market_capitalization);
                    yData2.push(data[i].sh_transaction_amount);
                    yData3.push(data[i].sh_pe_ratio);
                    yData4.push(data[i].sz_market_capitalization);
                    yData5.push(data[i].sz_transaction_amount);
                }
                trendChart.setOption({
                    xAxis: {
                        data: xData,
                    },
                    series: [{
                        name: "住院总收入",
                        data: yData1
                    }, {
                        name: "门诊总收入",
                        data: yData2
                    }, {
                        name: "医院总收入",
                        data: yData3
                    }, {
                        name: "增长比例",
                        data: yData4
                    },
                        {
                            name: "测试数据",
                            data: yData5
                        }]
                });
            }).fail(function (jqXHR) {
                console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
            });
        }, {% if site_configs.month_count_time %}{{ site_configs.month_count_time }}{% else %}5000{% endif %});

        //获取CSRC行业分类数据
        const csrcChart = echarts.init(document.getElementById("csrcChart"), "shine");
        const csrcChartOpt = {
            tooltip: {
                trigger: "item",
                formatter: "{b0}<br />接诊数：{c0}<br />占比：{d0}%"
            },
            legend: {
                type: "scroll",
                orient: "vertical",
                padding: 0,
                top: 15,
                right: 0,
                itemGap: 5,
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    fontSize: 10,
                    color: "#b0c2f9"
                }
            },
            series: [{
                name: "CSRC科室分类",
                type: "pie",
                center: ["47%", "55%"],
                radius: ["30%", "85%"]
            }]
        };
        csrcChart.setOption(csrcChartOpt);
        {## 4, 获取CSRC行业分类数据获取#}
        window.setInterval(function () {
            $.ajax({
                type: 'get',
                url: "{% url 'infos:csrc_data' %}",
                dataType: "json"
            }).done(function () {
                $("#csrcChart").addClass("chart-done");
            }).done(function (data) {
                //console.log('Data: ', data);
                const chartData = [];
                for (let i in data) {
                    chartData.push({
                        name: data[i].alias,
                        value: data[i].stock
                    });
                }
                csrcChart.setOption({
                    series: [{
                        name: "CSRC科室分类",
                        data: chartData
                    }]
                });
            }).fail(function (jqXHR) {
                console.log("后台请求数据失败: ", jqXHR.status, jqXHR.statusText);
            })
        }, {{ site_configs.csrc_time }});

        //浏览器窗口大小变化时，重置报表大小
        $(window).resize(function () {
            rankChart.resize();
            mapChart.resize();
            trendChart.resize();
            csrcChart.resize();
        });
    });

    //数字变化特效
    function rollNum(elId, startVal, endVal, decimalNum) {
        let n = decimalNum || 0;
        let countUp = new CountUp(elId, startVal, endVal, n, 2.5, {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.'
        });
        if (!countUp.error) {
            countUp.start();
        } else {
            console.error(countUp.error);
        }
    }
</script>
</body>
</html>
